<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'

// 是否显示 SnackBar
const showSnackBar = ref(false)

// 表单数据
const form = ref({
  username: '',
  password: '',
  remember: false
})

const isLoading = ref(false)

function submitForm() {
  showSnackBar.value = true
  isLoading.value = true

  setTimeout(() => {
    isLoading.value = false
  }, 2000)
}

// 模拟登录请求
// async function login() {
//   try {
//     const response = await axios.post('/api/login', form.value)
//     console.log(response.data)
//   } catch (error) {
//     console.error(error)
//   }
//
// }
</script>

<template>
  <v-app>
    <NavBar />

    <v-main>
      <v-container fluid>
        <v-overlay :model-value="isLoading" class="align-center justify-center">
          <v-progress-circular
            v-if="isLoading"
            class="ma-1"
            color="white"
            indeterminate
          ></v-progress-circular>
        </v-overlay>

        <v-row justify="center">
          <v-col cols="4">
            <v-card class="pa-4 mx-auto">
              <v-card-title class="text-center">登录</v-card-title>

              <v-card-item>
                <v-sheet class="mx-auto">
                  <v-snackbar
                    v-model="showSnackBar"
                    :timeout="2000"
                    color="primary"
                    variant="tonal"
                    multi-line
                  >
                    {{ JSON.stringify(form) }}

                    <template v-slot:actions>
                      <v-btn color="red" variant="text" @click="showSnackBar = !showSnackBar"
                        >关闭</v-btn
                      >
                    </template>
                  </v-snackbar>

                  <v-form>
                    <v-text-field
                      v-model="form.username"
                      label="用户名"
                      prepend-inner-icon="mdi-account"
                    ></v-text-field>

                    <v-text-field
                      v-model="form.password"
                      type="password"
                      label="密码"
                      prepend-inner-icon="mdi-key"
                    ></v-text-field>

                    <v-checkbox v-model="form.remember" label="记住我" color="primary"></v-checkbox>

                    <v-btn @click="submitForm" color="primary" type="button" block>登录</v-btn>

                    <v-btn color="grey-lighten-3" class="mt-3" type="button" block>注册</v-btn>
                  </v-form>
                </v-sheet>
              </v-card-item>

              <!-- <v-card-actions>
          <v-btn color="primary" type="submit" block>登录</v-btn>
          <v-btn to="register" block variant="tonal">注册</v-btn>
        </v-card-actions> -->
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>
